<template>
  <!-- border是否带有纵向边框       label列标题   align列对齐方式   width列宽度  data显示的数据，务必是数组-->
  <!-- type	对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮      prop列里的内容 -->
  <!-- trademarkArr 有三个对象，所以是三行 -->
  <!-- div不能符合我的需求，需要用到作用域插槽去传我想要的结构 -->
  <el-card >
   <el-button type="primary" size="default" icon="Plus" @click="addTrademark">添加品牌</el-button>
   <el-table  style="margin: 10px 0px" border :data="trademarkArr">
    <el-table-column  label="序号" width="80" align="center" type="index"/>
    <!-- prop="tmName",默认展示数据用div     也可以用插槽 -->
    <el-table-column  label="品牌名称" label-width="80px">
      <template #="{row,$index}">
        <pre style="color: brown;">{{ row.tmName }}</pre>
      </template>
    </el-table-column>
    <el-table-column  label="品牌LOGO" label-width="80px" >
      <template #="{row}">
        <img :src="row.logoUrl" style="width: 100px;height: 100px;">
      </template>
    </el-table-column>
    <el-table-column  label="品牌操作" >
        <template #="{row,$index}">
          <el-button size="small" type="primary" icon="Edit" @click="updateTrademark(row)"></el-button>
          <!--  Popconfirm 气泡确认框#点击某个元素弹出一个简单的气泡确认框 -->
          <el-popconfirm :title="`你确定要删除${row.tmName}?`" width="200px" icon="Delete" @confirm="removeTradeMark(row.id)">
             <template #reference>
              <el-button size="small" type="primary" icon="Delete"></el-button>
             </template>
  </el-popconfirm>
        </template>
     </el-table-column>
  </el-table>
  <!-- 分页器组件 -->
  <!-- 父子组件数据同步的业务====>v-model -->
  <!-- v-model:current-page 设置分页器当前的页码
    v-model:page-size  每页显示条目个数
    page-sizes	用于设置下拉菜单的数据
    background  设置分页器按钮的背景颜色
     layout    可以设置分页器六个子组件布局调整
  -->
     <!-- :page-count="6" 下面的页码按钮 1-6
      @current-change 分页器当前的页码变化时发请求获取数据
     -->

  <el-pagination
      :page-count="6"
      @size-change="sizeChange"
      @current-change="getHasTrademark"
      v-model:current-page="pageNow"
      v-model:page-size="limit"
      :page-sizes="[3,5,7,9]"
      :background="true"
      layout=" prev, pager, next, jumper ,->,sizes,total"
      :total="total"
    />
  </el-card>
  <!-- 对话框组件     在添加和修改时使用 -->
  <!-- v-model="dialogFormVisible"  控制对话框显示还是隐藏
   title设置对话框左上角标题
  -->
  <el-dialog v-model="dialogFormVisible" :title="trademarkParams.id?'修改品牌':'添加品牌'" >
   <el-form style="width: 80%;" :model="trademarkParams" :rules="rules" ref="formRef">
    <el-form-item label="品牌名称" prop="tmName" label-width="100px">
      <el-input placeholder="请您输入品牌名称" v-model="trademarkParams.tmName"></el-input>
    </el-form-item>
    <el-form-item label="品牌LOGO" prop="logoUrl" label-width="100px">
      <!--  action请求URL  上传一张图片作为logo，需把图片上传到服务器 
          action="/api/admin/product/fileUpload"必带api，否则代理服务器不发送这次post请求
            :show-file-list="false" 是否在下面显示文件名
            before-upload上传文件之前的钩子 约束上传文件的类型和大小
            on-success请求成功触发   收集图片地址
      -->
      <el-upload
    class="avatar-uploader"
    action="/api/admin/product/fileUpload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
   </el-form>
   <!-- 具名插槽  footer -->
    <template #footer>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref,reactive, nextTick} from 'vue'
import { ElMessage, type UploadProps } from 'element-plus'
import { reqHasTrademark, reqAddOrUpdateTrademark,reqDeleteTrademark} from '@/api/product/trademark'
import { Records ,TradeMarkResponseData,TradeMark} from '@/api/product/trademark/type';
// 分页器当前的页码
let pageNow = ref<number>(1)
// 每页显示条目个数
let limit = ref<number>(3)
//存储已有品牌总数
let total = ref<number>(0)
// 存储已有品牌的数据
let trademarkArr = ref<Records>([])
// 控制对话框显示还是隐藏
let dialogFormVisible = ref<boolean>(false)
//定义收集新增品牌的数据 
let trademarkParams = reactive<TradeMark>({
  tmName:'',
  logoUrl:''
})
//获取el-form组件实例
let formRef = ref()
  // （获取已有品牌数据的请求封装成一个函数，用的时候调用即可）
  const getHasTrademark = async (pager = 1) => {
    pageNow.value = pager
   let result:TradeMarkResponseData = await reqHasTrademark(pageNow.value, limit.value)
  //  data.records数据
  //  console.log(result)
    if(result.code == 200){
      // 存储已有品牌的总个数  
        total.value= result.data.total
        trademarkArr.value = result.data.records
    }
  }
  onMounted(()=>{
    getHasTrademark()
  })

  // 分页器当前的页码变化时会触发
  // const changePageNo = ()=>{
  //   getHasTrademark()
  // }

  const sizeChange = ()=>{
    //    下拉菜单一页/条数发生变化时触发（页码归1）
    // pageNow.value = 1
    getHasTrademark()
  }
//点击添加品牌弹出对话框
  const addTrademark = ()=>{
    dialogFormVisible.value = true
      //清空对话框的数据  点击添加品牌前清空
      trademarkParams.tmName=''
    trademarkParams.logoUrl=''
    // 修改之后再点添加必须清除id
      trademarkParams.id=0
      //点添加先清除表单的校验信息，一上来没有form表单是undefined
      // formRef.value?.clearValidate('tmName')
      // formRef.value?.clearValidate('logoUrl')
      //点添加先清除表单的校验信息，一上来没有form表单是undefined 第二种
      // 当响应式数据发生变化时，获取到更新后的form组件实例  nextTick
      nextTick(()=>{
        formRef.value.clearValidate('tmName')
        formRef.value.clearValidate('logoUrl')
      })
  }
  //点击编辑按钮弹出对话框   （已有品牌的数据得展示出来  :data="trademarkArr"），点击确定，收集到新的数据，发一个put请求(携带已有品牌的id)
  //怎么展示？ 已有品牌的数据赋值给trademarkParams   
  const updateTrademark = (row:TradeMark)=>{
    //清空校验规则错误的提示信息
    nextTick(()=>{
        formRef.value.clearValidate('tmName')
        formRef.value.clearValidate('logoUrl')
      })
    dialogFormVisible.value = true
    // Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
    Object.assign(trademarkParams,row)
    // trademarkParams.id = row.id
    // trademarkParams.tmName = row.tmName
    // trademarkParams.logoUrl= row.logoUrl
  }
  //按取消对话框消失
  const cancel= ()=>{
     //按取消对话框消失
    dialogFormVisible.value = false
     //清空对话框的数据
    //  trademarkParams.tmName=''
    //   trademarkParams.logoUrl=''
  }

  //  按确定  完成添加新的品牌或修改的业务 
   const confirm=async ()=>{
    // 在你发请求之前，对整个表单进行校验 如果校验全部通过，才能执行后面的语法  因为await等待的是成功的结果
   await formRef.value.validate();
    //发一下添加品牌的请求
    let result:any = await reqAddOrUpdateTrademark(trademarkParams)
    //成功有提示信息  对话框关闭 捞一次所有已有品牌的数据   添加或修改成功
    if(result.code ==200){
       //按确定对话框消失
      dialogFormVisible.value = false
      //提示信息
      ElMessage({
        type:'success',
        message:trademarkParams.id?'修改成功':'添加成功'
      })
      //捞一次所有已有品牌的数据 +1  需再次发请求   修改留在当前页，添加留在第一页
      getHasTrademark(trademarkParams.id ? pageNow.value : 1);

      //清空对话框的数据  点击添加品牌前清空
      // trademarkParams.tmName=''
      // trademarkParams.logoUrl=''
    }else{
      ElMessage({
        type:'error',
        message:trademarkParams.id?'修改失败':'添加失败'
      })
        //关闭对话框
        dialogFormVisible.value = false
    }
  }
  //上传图片之前触发的钩子函数
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    //要求：png|jpg|gif  不能超过4M
    if(rawFile.type=="image/png" || rawFile.type=="image/jpeg" ||rawFile.type=='image/gif'){
      if(rawFile.size /1024 /1024 <4){
        return true
      }else{
        ElMessage({
          type:'error',
          message:'不能超过4M'
        })
        return false
      }
    }else{
      ElMessage({
         type:'error',
          message:'要求：png|jpg|gif'
      })
      return false
    }
  }

  //图片上传成功钩子 response此次上传图片post请求返回的数据,    uploadFile也是  收集图片地址
  const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    // 收集图片地址,添加一个新的品牌的时候带给服务器
    trademarkParams.logoUrl = response.data
    // 图片上传成功，清除掉对应图片校验结果
    formRef.value.clearValidate('logoUrl')
}
//品牌自定义校验规则方法
const validatorTmName = (rule:any,value:any,callBack:any)=>{
  // 当失去焦点时，，才会触发此方法
    if(value.trim().length >= 2){
      callBack();
    }else{
      callBack(new Error('品牌名称须大于等于两位'))
    }
}
const validatorLogoUrl = (rule:any,value:any,callBack:any)=>{
      //如果图片上传
  if(value){
    callBack()
  }else{
    callBack(new Error('图片必须上传'))
  }
}
//表单校验规则对象
const rules = {
  tmName:[
    {required:true,trigger:'blur',validator:validatorTmName}
  ],
  logoUrl:[
    {required:true,validator: validatorLogoUrl}
  ]
}

//气泡确认框  确定按钮的回调
const removeTradeMark = async(id: number) => {
  let result = await reqDeleteTrademark(id);
  if(result.code==200){
    ElMessage({
      type:'success',
      message:'删除成功'
    })
    // 再次获取已有品牌的数据
    getHasTrademark(trademarkArr.value.length>1?pageNow.value:pageNow.value-1)
  }else{
    ElMessage({
      type:'error',
      message:'删除失败'
    })
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>